<template>
    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed"> 
         
        <router-link v-for="(item, index) in title"
        :key="index" :to="item.net">
        <div @click="isActive=index" class="van-tabbar-item">
             <div :class="['van-tabbar-item__icon',isActive==index?'active':'']"  >
                <i class="iconfont foot" v-html="item.icon"></i>
            </div>
            <div :class="['van-tabbar-item__text',isActive==index?'active1':'']">{{item.item1}}</div>
            </div> 
        </router-link>    
    </div>
</template>

<script>
    export default {
        props: {
            activeNum:{
                default:0
            } 
        },
        data() {
            return {
               isActive:0,
               title:[
                   {
                     item1:'首页',
                     icon:'&#xe63a;',
                     net:'/'
                   },
                   {
                     item1:'全部分类',
                     icon:'&#xe855;',
                     net:'/classify'
                   },
                   {
                     item1:'单位采购',
                     icon:'&#xe65b;',
                     net:'/purchase'
                   },
                   {
                     item1:'购物车',
                     icon:'&#xe690;',
                     net:'/cart'
                   },
                   {
                     item1:'个人中心',
                     icon:'&#xe615;',
                     net:'/personal'
                   },
               ]
            }
        },
        created () {
            this.isActive = this.activeNum
        },
    }
</script>

<style lang="less" scoped>
@import url('../assets/css/footer.css');
@import url('../assets/font/iconfont.css');
</style>